<!-- Teacher_XueBaSaiMoocTag.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>自由课程</title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			.nav-right-img{
				width: 24px;
				margin-left: 12px;
				margin-top: 8px;
			}
			.redPointMessage{
				width: 8px;
				height: 8px;
				top: 4px;
				left: 30px;
				right: 0px;
			}
			.tabbar {
				height: 40px;
				line-height: 40px;
				text-align: center;
				/*border-bottom: 1px solid #e0e0e0;*/
				background: #fff;
			}
			.tabbar .col {
				font-size: 16px;
			}
			.row {
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
			}
			.col {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				position: relative;
				overflow: hidden;
			}
			.indicator-super-div{
				width: 100%;
				height: 2px;
				padding: 0 20%;
				overflow: hidden;
			}
			.indicator {
				height: 2px;
				width: 62%;
				background: #18b4ed;
				position: absolute;
				bottom: 0;
				z-index: 2;
			}
			.weui_tabbar {
				width: 100%;
				position: fixed;
				left: 0;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<div class="base_style_color " id='BarAppearance' style="height: 22px;width: 100%"></div>
		<div class="base_navigation_bar base_style_color">
			<a class="base_left_item" href="#" onclick="backClick()"> <img class="base_back_icon" src="../../image/icon_jiantou.png" alt=""> </a>
			<span id="title_id">课程章节</span>
			<a class="base_right_item" onclick="toHelpClick()" style="position:relative;" >
				<img id="msg_img" class="nav-right-img" src="../../image/helpInfo.png" alt="">
			</a>
		</div>
		<div class="base_content_div mui-table-view">
			<div class="bgwhite" style="padding: 0 44px;">
				<!-- <div id="segmentedControl" class="mui-segmented-control">
					<a id="item0" class="segment_item mui-control-item mui-active" href="#" onclick="itemClick(0)"> 章节 </a>
					<a id="item1" class="segment_item mui-control-item" href="#"  onclick="itemClick(1)"> 答疑 </a>
					<a id="item2" class="segment_item mui-control-item" href="#"  onclick="itemClick(2)"> 笔记 </a>
					<a id="item3" class="segment_item mui-control-item" href="#"  onclick="itemClick(3)"> 评论 </a>
				</div> -->
				<div id="selectBar" class="row hightitem tabbar" >
					<div class="col base_dark_grey base_content_font" id="col1" tapmode onclick="tabswitch(1)">
						章节
						<div class="indicator-super-div">
							<div class="indicator" id="indicator1"></div>
						</div>
					</div>
					<div class="col base_dark_grey base_content_font"  id="col2" tapmode onclick="tabswitch(2)">
						<span id="question_tag">
							答疑
						</span>
						<div class="indicator-super-div">
							<div class="indicator" id="indicator2"></div>
						</div>
					</div>
					<div class="col base_dark_grey base_content_font" id="col3" tapmode onclick="tabswitch(3)">
						笔记
						<div class="indicator-super-div">
							<div class="indicator" id="indicator3"></div>
						</div>
					</div>
					<div class="col base_dark_grey base_content_font" id="col4" tapmode onclick="tabswitch(4)">
						统计
						<div class="indicator-super-div">
							<div class="indicator" id="indicator4"></div>
						</div>
					</div>
					<div class="col base_dark_grey base_content_font" id="col5" tapmode onclick="tabswitch(5)">
						分析
						<div class="indicator-super-div">
							<div class="indicator" id="indicator5"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../script/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script src="../../script/common.js"></script>
	<script src="../../script/push.js"></script>
	<script src="../../script/requestTool.js"></script>
	<script type="text/javascript">
		apiready = function() {
		  $('#title_id').html(api.pageParam.coursename);
			setupFreeCourseFrameGroup();
			//推送消息
            setupMsgBtnStatus();
            api.addEventListener({
                name: 'pushMessage'
            }, function(ret, err) {
                pushMessage();
            });
            updateMessageStatusFromChapterOrDiscuss(api.pageParam.courseid);
		};
		function toHelpClick(){
			api.openWin({useWKWebView:true,
			    name: 'Teacher_XueBaSaiMoccHelp',
			    url: 'Teacher_XueBaSaiMoccHelp.html'
			});
		}
		function setupFreeCourseFrameGroup() {
			var y = $('#BarAppearance').height() + $('.base_navigation_bar').height() + $('.base_content_div').height();
			var h = api.winHeight - y;
			var rect = {
				x : 0,
				y : y,
				w : 'auto',
				h : h
			}
			var pageP = api.pageParam;
			pageP["isxueba"] = 1; 
			api.openFrameGroup({
				name : 'freeCourseGroup',
				rect : rect,
				scrollEnabled : false,
				frames : [{
					name : 'Teacher_XueBaSaiMoocChapter',
					url : 'Teacher_XueBaSaiMoocChapter.html',
					pageParam : api.pageParam
				},{
			        name: 'Teacher_StudyCourseQA',
			        url: 'Teacher_StudyCourseQA.html',
			        pageParam: pageP
					// name : 'chatList',
			  //       url : '../chatModule/chatList.html',
			  //       pageParam : {
			  //       	cid : api.pageParam.courseid,
			  //       	pid : api.pageParam.planid,
			  //       	groupType : 'course'
			  //       }
			    },{
			        name: 'Teacher_StudyCourseNote',
			        url: 'Teacher_StudyCourseNote.html',
			        pageParam: pageP
			    },{
					// name : 'New_Student_Study_CourseCommentList',
					// url : '../Study/New_Student_Study_CourseCommentList.html',
					// pageParam : {
					// 	cid : api.pageParam.courseid,
					// 	pid : api.pageParam.planid,
					// 	title : api.pageParam.coursename
					// }
					name : 'StatisticalAnalysisFrame',
					url : '../CourseManage/StatisticalAnalysisFrame.html',
					pageParam : {
						cid : api.pageParam.courseid,
						pid : api.pageParam.planid,
						isxueba : 1
					}
				},{
					name : 'StatisticalAnalysis',
					url : 'StatisticalAnalysis.html',
					pageParam : {
						cid : api.pageParam.courseid
					}
				}]
			}, function(ret, err) {
			});
			tabswitch(1);
		}

		function itemClick(itemIndex) {
			if (!$('#item' + itemIndex).hasClass('mui-active')) {
				$('.segment_item').removeClass('mui-active');
				$('#item' + itemIndex).addClass('mui-active');
				setupGroupIndex(itemIndex);
			}
		}
		function tabswitch(index){
			$('.indicator').attr('style','display:none;');
			$('.col').attr('style', 'color:#323232;');
			$('#col'+index).attr('style','color:#18b4ed;');
			$('#indicator'+index).attr('style','display:block;');
			setupGroupIndex(index-1);
		}
		function setupGroupIndex(index) {

			api.setFrameGroupIndex({
				name : 'freeCourseGroup',
				index : index,
				scroll : false
			});
		}


        //push 消息提醒
        function pushMessage() {
            var jid = $api.getStorage('cfnetppjxid');
            var msgVal = $api.getStorage('cfnetppmessagejiaoxue' + jid  + "massage" +  api.pageParam.courseid);
            consoleTest("msgVal cid : " + msgVal);
            if (msgVal == 1) {
                $('#redPointMessage').show();
            }else{
                $('#redPointMessage').hide();
            }
        }
        function setupMsgBtnStatus(){
            api.sendEvent({
                name: 'click_pushMessage_index'
            });
            pushMessage();
        }

		//课程消息 跳转对应列表
        function toMessageClick(){
            api.openWin({useWKWebView:true,
                name: 'Teacher_ToDoMessageWin',
                url: 'Teacher_ToDoMessageWin.html',
                pageParam : {
                    cid : api.pageParam.courseid
                }
            });
        }
	</script>
</html>
